<template>
    <div class="box-padding">
        <!-- <div class="role-title">{{ $route.params.name }}</div> -->
        <Row :gutter="16">
            <Col span="4">
                <Input v-model="gsName" placeholder="公司名称" disabled />
            </Col>
            <Col span="4">
                <Input v-model="projectName" placeholder="项目名称" disabled />
            </Col>
            <Col span="4">
                <Select v-model="parmes.whereMap.constructionPointId" placeholder="工点名称" clearable>
                    <Option v-for="item in workLedgerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </Col>
            <Col span="4">
                <Select v-model="parmes.whereMap.constructionPointRiskLevel" placeholder="工点风险等级" clearable>
                    <Option v-for="item in leveList" :value="item.code" :key="item.id">{{ item.name }}</Option>
                </Select>
            </Col>
            <Col span="4">
                <Select v-model="parmes.whereMap.riskLevel" placeholder="作业风险等级" clearable>
                    <Option v-for="item in riskLevelarr" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </Col>
            <Col span="4">
                <Select v-model="parmes.whereMap.riskCategoryIds" placeholder="作业风险类别" clearable>
                    <Option v-for="item in operatingRisk" :value="item.id" :key="item.id">{{ item.riskCategoryName }}</Option>
                </Select>
            </Col>
            
        </Row>
        <Row :gutter="16" style="margin-top:10px;">
            <Col span="4">
                <Input v-model="parmes.whereMap.riskName" placeholder="作业风险名称" />
            </Col>
            <Col span="4" offset="16" style="text-align:right;">
                <Button type="primary" @click="parmes.currentPage = 1,nextMonthWorkedRiskList()">查询</Button>
            </Col>
        </Row>
        <div class="those-box">
            <Row>
                <Col span="4" style="font-size:13px;font-weight:bold; color:#627181;">
                    <span style="margin-top:20px;display:inline-block;">
                        风险总数：{{numObj.total}}项
                    </span>
                </Col>
                <Col span="20">
                    <Row :gutter="16">
                        <Col span="4" style="font-size:13px;">Ⅰ级类型：{{numObj.risk ? numObj.risk.firstLevel : 0}}项</Col>
                        <Col span="4" style="font-size:13px;">Ⅱ级类型：{{numObj.risk ? numObj.risk.secondLevel : 0}}项</Col>
                        <Col span="4" style="font-size:13px;">Ⅲ级类型：{{numObj.risk ? numObj.risk.thirdLevel : 0}}项</Col>
                        <Col span="4" style="font-size:13px;">Ⅳ级类型：{{numObj.risk ? numObj.risk.fourthLevel : 0}}项</Col>
                    </Row>
                    <Row :gutter="16" style="margin-top: 10px;">
                        <Col span="4" style="font-size:13px;" v-for="(item,index) in numObj.category" :key="index" :title="item.riskName">{{item.riskName.length > 4 ? `${item.riskName.substr(0,4)}...` : item.riskName}}：{{item.cnt}}项</Col>
                    </Row>
                </Col>
                
            </Row>
        </div>
        <Table border :columns="columns1" :data="data1" style="margin-top:20px;" @on-selection-change="selectRowTable">
            <template slot-scope="{ row, index }" slot="action">
                <a @click="detailModal = !detailModal, detailObj= row,$refs.tab3.setId()">详情</a>
            </template>
        </Table>
        <div class="page-div">
            <Page
            class="tab-page"
            :total="total"
            :current="parmes.currentPage"
            :page-size="parmes.pageSize"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            :page-size-opts='[10,20,50,100]'
            show-elevator
            show-sizer
            show-total
            />
        </div>
        <Modal v-model="detailModal" title="风险详情" width="70%" :footer-hide="true">
            <div class="modal-content">
                <tab3 :detailObj="detailObj" ref="tab3"></tab3>
            </div>
        </Modal>
        <div style="text-align:center;margin-top:20px;">
            <Button type="primary" @click="$emit('isNextMonthMethods',false),$emit('addList',selectTable)">确定</Button>
            <Button style="margin-left: 20px;" @click="$emit('isNextMonthMethods',false)">取消</Button>
        </div>
    </div>
</template>
<script>
import tab3 from './detail-tab-month/tab3'
import crudMixin from '../../../mixins/crudMixin'
export default {
    props:['projectIds','projectName'],
    mixins: [crudMixin],
    components:{
        tab3
    },
    data(){
        return{
            riskLevelarr:[
                {
                    id:1,
                    name:'Ⅰ级'
                },
                {
                    id:2,
                    name:'Ⅱ级'
                },
                {
                    id:3,
                    name:'Ⅲ级'
                },
                {
                    id:4,
                    name:'Ⅳ级'
                }
            ],
            detailObj:{},
            detailModal:false,
            cityList: [],
            selectTable:[],      // 选择
            operatingRisk:[],
            gsName: '',
            total:0,
            parmes:{
                currentPage:1,
                pageSize:10,
                whereMap:{
                    orgId:'',
                    proId:'',
                    constructionPointId:'',
                    riskCategoryId:'',
                    riskName:'',
                    constructionPointRiskLevel:'',
                    riskLevel:'',
                }
            },
            workLedgerList:[],
            treeRiskType:[],
            treeRiskTypeData:[],
            columns1: [
                {
                    type: 'selection',
                    align: 'center',
                    width: 60,
                },
                {
                    title: '序号',
                    align: 'center',
                    width: 60,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.parmes.currentPage - 1) * this.parmes.pageSize + 1
                        )
                    }
                },
                {
                    title: '公司名称',
                    key: 'enterpriseName',
                    align: 'center'
                },
                {
                    title: '项目名称',
                    key: 'projectName',
                    align: 'center'
                },
                {
                    title: '工点名称',
                    key: 'pointName',
                    align: 'center'
                },
                {
                    title: '是否在施',
                    key: 'isWorkedThisMonth',
                    align: 'center'
                },
                {
                    title: '工点风险等级',
                    key: 'pointRiskGradeName',
                    align: 'center'
                },
                {
                    title: '作业风险类别',
                    key: 'riskCategoryNames',
                    align: 'center'
                },
                {
                    title: '作业风险名称',
                    key: 'riskOperationName',
                    align: 'center'
                },
                {
                    title: '作业风险等级',
                    key: 'riskLevelName',
                    align: 'center'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 60,
                    align: 'center'
                },
            ],
            data1: [],
            numObj:{}
        }
    },
    mounted(){
        this.projectGetAll()    // 项目列表
        this.dictTypeList('RISK_GRADE') // 工点风险等级
        let userObj = JSON.parse(localStorage.getItem('userList'))
        if(userObj.userInOrgType == 'PROJECT_TEAM_USER'){
            this.parmes.whereMap.orgId = userObj.projectTeamId
            this.gsName = userObj.projectTeamName
        }else if(userObj.userInOrgType == 'NOMAL_ENTERPRISE_USER' || userObj.userInOrgType == 'ROOT_ENTERPRISE_USER'){
            this.parmes.whereMap.orgId = userObj.enterpriseId
            this.gsName = userObj.enterpriseName
        }
        this.getRiskType()
        this.riskCategoryFindAll()
    },
    methods: {
        // table单选
        selectRowTable(selection){
            selection.forEach(e=>{
                e.source = 'next'
            })
            this.selectTable = selection
        },
        // 设置项目ID
        setProjectId(){
            setTimeout(()=>{
                this.parmes.whereMap.proId = [this.projectIds]
                this.nextMonthWorkedRiskList()
                this.workstationLedgerList()
            },1000)
        },
        //下月风险在施选择统计
        nextMonthWorkedRiskStatistics(){
            this.$api.MonthlyDynamics.nextMonthWorkedRiskStatistics(this.parmes).then(resp=>{
                if(resp.code == 200){
                    this.numObj = resp.data
                }
            })
        },
        //下月风险在施选择列表
        nextMonthWorkedRiskList(){
            if(this.parmes.whereMap.constructionPointRiskLevel == undefined || this.parmes.whereMap.constructionPointRiskLevel == null){
                this.parmes.whereMap.constructionPointRiskLevel = ''
            }
            if(this.parmes.whereMap.riskLevel == undefined || this.parmes.whereMap.riskLevel == null){
                this.parmes.whereMap.riskLevel = ''
            }
            this.$api.MonthlyDynamics.nextMonthWorkedRiskList(this.parmes).then(resp=>{
                if(resp.code == 200){
                    this.data1 = resp.data.resultObject
                    this.total = resp.data.totalRecord
                    this.nextMonthWorkedRiskStatistics()
                }
            })
        },
        // 工点名称列表
        workstationLedgerList() {
            let parmes = {
                currentPage:1,
                pageSize:9999,
                whereMap:{
                    projectId:this.projectIds
                }
            }
            this.$api.WorkstationLedger.workstationLedgerList(parmes).then(
                resp => {
                    if (resp.code == 200) {
                        this.workLedgerList = resp.data.resultObject
                    }
                }
            )
        },
        //获取风险类型
        getRiskType() {
            this.$api.WorkstationLedger.riskTypeTree().then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        item.title = item.name
                        if (item.children.length > 0) {
                            item.children = this.changeRishTypeName(item.children)
                        }
                    })
                    this.treeRiskTypeData = res.data
                    this.treeRiskType = res.data
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        // 作业风险类别--列表
        riskCategoryFindAll(){
            this.$api.MonthlyDynamics.riskCategoryFindAll().then(resp=>{
                if(resp.code == 200){
                    this.operatingRisk = resp.data
                }
            })
        },
        changeRishTypeName(data) {
            if (data) {
                let item = data
                const arr = []
                item.forEach(val => {
                    let obj = {}
                    obj.title = val.name
                    obj.id = val.id
                    obj.children = []
                    if (val.children.length > 0) {
                        obj.children = this.changeRishTypeName(val.children)
                    }
                    arr.push(obj)
                })
                return arr
            }
        },
        checkData(data){
            this.treeRiskType = []
            this.parmes.whereMap.riskCategoryId = data[0].id
            this.treeRiskType.push({
                id:data[0].id,
                title:data[0].title
            })
            this.$refs.treeRiskType.visible = false
        },
        pageChange(page){
            this.parmes.currentPage = page
            this.nextMonthWorkedRiskList()
        },
        sizeChange(num){
            this.parmes.pageSize = num
            this.nextMonthWorkedRiskList()
        },
    }
}
</script>
<style scoped>
.those-box{
    margin-top: 20px;
    padding: 20px;
    background-color: #F5F8FC;
}
</style>